<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="jquery.min.js"></script>
</head>

<body>
  <a href="http://www.itcast.cn" title="都挺好">都挺好</a>
  <input type="checkbox" name="" id="" checked>
  <div index="1" data-index="2">我是div</div>
  <span>123</span>
  <script>
    $(function () {
      // 1. element.prop("属性名") 获取属性值
      // prop获取元素固有的属性值
      console.log($("a").prop("href"))
      // 设置属性值
      $("a").prop("title", "我们都挺好")

      // 观察复选框checked是否被选中
      $("input").change(function () {
        // prop 获取某一个表单的属性值
        console.log($(this).prop("checked"))
      })

      // 2. index是自定义属性 不能通过prop来获取 而是通过attr来获取
      // console.log($("div").prop("index"))
      console.log($("div").attr("index"))  // <div index="1" data-index="2">我是div</div>
      $("div").attr("index", "4")  // <div index="4" data-index="2">我是div</div>
      $("div").attr("data-index", "55")  // <div index="4" data-index="55">我是div</div>

      // 3. 数据缓存data() 这个里面的数据是存放在元素的内存里面的
      $("span").data("uname", "andy")
      // 可以简单理解就是把这个元素当作一个变量来看 然后把这个元素放到内存里面存起来
      // 在控制台是看不到这个变量的
      console.log($("span").data("uname"))  // andy
      // 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
      console.log($("div").data("index"))  // 55
    })
  </script>
</body>

</html>